<template>
  <div class="card content-box">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="waterChart">
import echarts, { ECOption } from '@/components/ECharts/config'
import ECharts from '@/components/ECharts/index.vue'

const option = {
  title: [
    {
      text: '预约量',
      x: '25%',
      y: 30,
      textAlign: 'center',
      textStyle: {
        color: '#a1a1a1',
        fontSize: 16,
        fontFamily: 'Microsoft Yahei',
        fontWeight: '100',
        textAlign: 'center'
      }
    },
    {
      text: '实时客流量',
      x: '75%',
      y: 30,
      textAlign: 'center',
      textStyle: {
        color: '#a1a1a1',
        fontSize: 16,
        fontFamily: 'Microsoft Yahei',
        fontWeight: '100',
        textAlign: 'center'
      }
    },
    {
      text: (0.5 * 100).toFixed(0) + '%',
      left: '25%',
      top: '38%',
      textAlign: 'center',
      textStyle: {
        fontSize: '50',
        fontWeight: '300',
        color: '#a06a0a',
        textAlign: 'center',
        textBorderColor: 'rgba(0, 0, 0, 0)',
        textShadowColor: '#fff',
        textShadowBlur: '0',
        textShadowOffsetX: 0,
        textShadowOffsetY: 1
      }
    },
    {
      text: (0.5 * 100).toFixed(0) + '%',
      left: '75%',
      top: '38%',
      textAlign: 'center',
      textStyle: {
        fontSize: '50',
        fontWeight: '300',
        color: '#02456d',
        textAlign: 'center',
        textBorderColor: 'rgba(0, 0, 0, 0)',
        textShadowColor: '#fff',
        textShadowBlur: '0',
        textShadowOffsetX: 0,
        textShadowOffsetY: 1
      }
    }
  ],
  series: [
    {
      type: 'liquidFill',
      radius: '50%',
      z: 6,
      center: ['25%', '50%'],
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: 'rgba(251, 173, 23, 0)'
            },
            {
              offset: 0.5,
              color: 'rgba(251, 173, 23, .2)'
            },
            {
              offset: 0,
              color: 'rgba(251, 173, 23, 1)'
            }
          ],
          globalCoord: false
        }
      ],
      data: [0.5, 0.5, 0.5],
      backgroundStyle: {
        borderWidth: 1,
        color: 'transparent'
      },
      label: {
        normal: {
          formatter: ''
        }
      },
      outline: {
        show: true,
        itemStyle: {
          borderWidth: 0
        },
        borderDistance: 0
      }
    },
    {
      name: '第二层白边',
      type: 'pie',
      z: 3,
      radius: ['0%', '55%'],
      center: ['25%', '50%'],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        }
      },
      data: [
        {
          value: 100,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fefefe'
                },
                {
                  offset: 1,
                  color: '#e7e8ea'
                }
              ])
            }
          }
        },
        {
          value: 0,
          itemStyle: {
            normal: {
              color: 'transparent'
            }
          }
        }
      ]
    },
    {
      name: '最外绿边',
      type: 'pie',
      z: 1,
      radius: ['0%', '58%'],
      center: ['25%', '50%'],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        }
      },
      data: [
        {
          value: 100,
          itemStyle: {
            color: '#fdc56e'
          }
        },
        {
          value: 0,
          itemStyle: {
            normal: {
              color: 'transparent'
            }
          }
        }
      ]
    },
    {
      type: 'liquidFill',
      radius: '50%',
      z: 6,
      center: ['75%', '50%'],
      color: ['#c1dce7', '#90d3f0', '#009bdb'],
      data: [0.6, { value: 0.5, direction: 'left' }, 0.4, 0.3],
      backgroundStyle: {
        borderWidth: 1,
        color: 'transparent'
      },
      label: {
        normal: {
          formatter: ''
        }
      },
      outline: {
        show: true,
        itemStyle: {
          borderWidth: 0
        },
        borderDistance: 0
      }
    },
    {
      name: '第二层白边',
      type: 'pie',
      z: 3,
      radius: ['0%', '55%'],
      center: ['75%', '50%'],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        }
      },
      data: [
        {
          value: 100,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fefefe'
                },
                {
                  offset: 1,
                  color: '#e7e8ea'
                }
              ])
            }
          }
        },
        {
          value: 0,
          itemStyle: {
            normal: {
              color: 'transparent'
            }
          }
        }
      ]
    },
    {
      name: '最外蓝边',
      type: 'pie',
      z: 1,
      radius: ['0%', '58%'],
      center: ['75%', '50%'],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        }
      },
      data: [
        {
          value: 100,
          itemStyle: {
            color: '#07a2e3'
          }
        },
        {
          value: 0,
          itemStyle: {
            normal: {
              color: 'transparent'
            }
          }
        }
      ]
    }
  ]
} as ECOption
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
